<template>
  <div>
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-width="100px"
      label-suffix=":"
      style="width: 100%"
      label-position="top"
    >
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="addForm.deviceName" placeholder="请输入设备名称" />
      </el-form-item>

      <el-form-item label="设备编码" prop="outCode">
        <el-input v-model="addForm.outCode" placeholder="请输入设备编码" />
      </el-form-item>

      <el-form-item label="设备分类" prop="categoryId">
        <el-select
          v-model="addForm.categoryId"
          placeholder="请选择设备分类"
          @change="
            getTypeList();
            addForm.typeId = null;
          "
          filterable
        >
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :value="item.id"
            :label="item.categoryName"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="设备类型" prop="typeId">
        <el-select
          v-model="addForm.typeId"
          placeholder="请选择设备类型"
          v-if="props.detail.id == 0"
          filterable
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :value="item.id"
            :label="item.typeName"
          />
        </el-select>
        <el-select
          v-model="addForm.typeId"
          placeholder="请选择设备类型"
          v-else
          filterable
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :value="item.id"
            :label="item.typeName"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="设备品牌" prop="brandId">
        <el-select
          v-model="addForm.brandId"
          placeholder="请选择设备品牌"
          filterable
        >
          <el-option
            v-for="item in brandList"
            :key="item.id"
            :value="item.id"
            :label="item.brandName"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="fixed bottom-2 right-2">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ loading ? "提交中..." : "提交" }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { selectCategoryList, selectTypeList, selectBrandList } from "@/api/api";
import { handleApiResponse } from "@/utils/request.js";
import {
  RegisterDevice,
  UpdateDeviceName,
  UpdateDeviceInfo,
} from "../../../../../wailsjs/go/api/DeviceApi";

onMounted(() => {
  getCategoryList();
  getBrandList();

  if (props.detail.id != 0) {
    addForm.value = props.detail;
    getTypeList();
  }
});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
});

const addFormRef = ref(null);
const addForm = ref({});

const loading = ref(false);
const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return;
    // console.log(addForm.value);
    if (props.detail.id == 0) {
      addForm.value.categoryName = categoryList.value.find(
        (item) => item.id == addForm.value.categoryId
      )?.categoryName;
      addForm.value.typeName = typeList.value.find(
        (item) => item.id == addForm.value.typeId
      )?.typeName;
      addForm.value.brandName = brandList.value.find(
        (item) => item.id == addForm.value.brandId
      )?.brandName;

      loading.value = true;
      handleApiResponse(() => RegisterDevice(addForm.value))
        .then((res) => {
          if (res.code == 0) {
            ElMessage.success("新增成功");
            handleCancel(1);
          }
          loading.value = false;
        })
        .catch((err) => {
          loading.value = false;
        });
    } else {
      loading.value = true;
      handleApiResponse(() => UpdateDeviceInfo(addForm.value))
        .then((res) => {
          if (res.code == 0) {
            ElMessage.success("编辑成功");
            handleCancel(1);
          }
          loading.value = false;
        })
        .catch((err) => {
          loading.value = false;
        });
    }
  });
};
const handleCancel = (val = 0) => {
  emit("handleBack", val);
};

const rules = ref({
  deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  outCode: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
  categoryId: [{ required: true, message: "请选择设备分类", trigger: "blur" }],
  typeId: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
  brandId: [{ required: true, message: "请选择设备品牌", trigger: "blur" }],
});

const categoryList = ref([]); // 设备分类列表
const typeList = ref([]); // 设备类型列表
const brandList = ref([]); // 设备品牌列表
async function getCategoryList() {
  selectCategoryList().then((res) => {
    if (res.code == 0) {
      categoryList.value = res.data.list || [];
    }
  });
}
async function getTypeList() {
  selectTypeList({ id: addForm.value.categoryId }).then((res) => {
    if (res.code == 0) {
      typeList.value = res.data.list || [];
    }
  });
}
async function getBrandList() {
  selectBrandList().then((res) => {
    if (res.code == 0) {
      brandList.value = res.data.list || [];
    }
  });
}
</script>

<style scoped lang="scss">
</style>